<template>
  <div ref="gantt" />
</template>

<script>
import { gantt } from 'dhtmlx-gantt'
export default {
  name: 'Gantt',
  props: {
    tasks: {
      type: Object,
      default() {
        return { data: [], links: [], columns: [], scales: [] }
      }
    }
  },

  mounted: function() {
    gantt.config.xml_date = '%Y-%m-%d'

    gantt.createDataProcessor((entity, action, data, id) => {
      debugger
      this.$emit(`${entity}-updated`, id, action, data)
    })
    gantt.init(this.$refs.gantt)
    gantt.parse(this.$props.tasks)
  }
}
</script>

<style>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>
